<template>
    <view :class="[primarySize()]">
        <view class="container">
            <view class="page-head flex-box">
                <view class="tab_item flex-grow-1" :class="query.status==0?'active':''" @click="bindStatusChange(0)">已邀请
                </view>
                <view class="tab_item flex-grow-1" :class="query.status==2?'active':''" @click="bindStatusChange(2)">已同意
                </view>
                <view class="tab_item flex-grow-1" :class="query.status==1?'active':''" @click="bindStatusChange(1)">已拒绝
                </view>
            </view>
            <view class="pt88 plr30 pb30">
                <view class="item" v-for="(interview,index) in interviews">
                    <view class="flex-box">
                        <view class="flex-grow-1 col3 fs32 lh44">{{interview.resume.personal.realname}}</view>
                        <view class="fs24 col9">{{formatDatetime(interview.interview_time,'mm月dd日')}}</view>
                    </view>
                    <view class="mt10 fs24 col3 lh32">应聘岗位:{{interview.job.job_name}}</view>
                    <view class="fs24 col3 lh32 mt10">期望薪资:<text class="col8 fs28 lh32 fwb" v-if="interview.resume.job_intention.length>0">{{interview.resume.job_intention[0].expect_salary.name}}/月</text>
                    </view>
                    <view class="clearfix m-ellipsis">
                        <view class="label">{{interview.resume.personal.work_experience.name}}</view>
                        <view class="label">{{interview.resume.personal.education_level.name}}</view>
                    </view>
                    <view class="pt30"></view>
                    <image :src="iconPath('status_img0.png')" v-if="interview.status==0" mode="widthFix" class="tips">
                    </image>
                    <image src="@/static/public/status_img9.png" v-else-if="interview.status==1" mode="widthFix" class="tips"></image>
                    <image :src="iconPath('status_img8.png')" v-else mode="widthFix" class="tips">
                    </image>


                    <view class="recom_btn flex-box" v-if="interview.status==2">
                        <button hover-class="none" class="flex-grow-1" @click.stop="bindFailInterview(index)">面试不合格</button>
                        <button hover-class="none" class="flex-grow-1 invite" @click.stop="bindPassInterview(index)">面试录取</button>
                    </view>
                    <view class="recom_btn flex-box" v-else-if="interview.status==3">
                        <button hover-class="none" class="flex-grow-1">面试不合格</button>
                    </view>
                    <view class="recom_btn flex-box" v-else-if="interview.status==4">
                        <button hover-class="none" class="flex-grow-1 invite">面试已录取</button>
                    </view>

                </view>

                <view class="nothing" v-if="interviewsMore.nothing">
                    <image src="/static/public/icon_nothing.png" mode="aspectFit"></image>
                    <view>暂无相关信息</view>
                </view>
                <view class="g-btn3-wrap" v-else>
                    <view class="g-btn3" @click="fetch()">{{interviewsMore.text}}</view>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
    const app = getApp();
    export default {
        data() {
            return {

                tabNumber: {
                    tab_0: 0,
                    tab_1: 0,
                    tab_2: 0,
                    tab_3: 0,
                    tab_4: 0
                },
                query: {
                    status: 0
                },
                interviews: [],
                interviewsMore: {
                    page: 1
                },
            }
        },
        onReady() {
            if (app.globalData.primary != 'blue') {
                uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#ff7100'
                })
            } else {
                uni.setNavigationBarColor({
                    frontColor: '#ffffff',
                    backgroundColor: '#2A79F2'
                })
            }
        },
        onLoad(options) {

            this.tabCount();
            this.fetch();
        },
        onReachBottom() {
            this.fetch();
        },
        methods: {
            bindStatusChange(status) {
                this.query.status = status;
                this.refresh();
            },
            refresh: function() {
                this.interviews = [];
                this.interviewsMore = {
                    page: 1
                };
                this.tabCount();
                this.fetch();
            },
            fetch() {
                this.$util.fetch(this, '/xilujob.job_interview/company_list', this.query, 'interviewsMore', 'interviews', 'data');
            },
            bindFailInterview(index) {
                let page = this;
                let interview = this.interviews[index];
                uni.showModal({
                    title: '提示',
                    content: '确认面试不合格？',
                    success: res => {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilujob.job_interview/multi_status/interview_id/' + interview.id,
                                data: {
                                    status: 3
                                },
                                success: ret => {
                                    page.interviews[index].status = ret.data.status;
                                }
                            });
                        }
                    }
                })
            },
            bindPassInterview(index) {
                let page = this;
                let interview = this.interviews[index];
                uni.showModal({
                    title: '提示',
                    content: '确认面试录取？',
                    success: res => {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilujob.job_interview/multi_status/interview_id/' + interview.id,
                                data: {
                                    status: 4
                                },
                                success: ret => {
                                    page.interviews[index].status = ret.data.status;
                                }
                            });
                        }
                    }
                })
            },

            tabCount() {
                var page = this;
                this.$core.get({
                    url: '/xilujob.job_interview/company_list_count',
                    success(ret, response) {
                        page.tabNumber = ret.data
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pt88 {
        padding-top: 88rpx;
    }

    .page-head {
        height: 88rpx;
        background: var(--primary);

        .tab_item {
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            font-size: 26rpx;
            color: #FFFFFF;

            &.active {
                font-weight: bold;
                font-size: 26rpx;
                color: #FFFFFF;
                position: relative;

                &::after {
                    content: '';
                    width: 36rpx;
                    height: 6rpx;
                    background: #FFFFFF;
                    border-radius: 4rpx;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }

    .item {
        width: 690rpx;
        background: #fff;
        border-radius: 18rpx;
        margin-top: 20rpx;
        padding: 30rpx 30rpx 0;
        position: relative;

        .label {
            display: inline-block;
            vertical-align: top;
            height: 38rpx;
            background: #F7F7F7;
            border-radius: 4rpx;
            line-height: 38rpx;
            text-align: center;
            font-size: 20rpx;
            color: #A5A5A5;
            padding: 0 14rpx;
            margin-top: 20rpx;
            margin-right: 18rpx;
        }

        .tips {
            width: 122rpx;
            height: 122rpx;
            top: 80rpx;
            right: 15rpx;
            position: absolute;
        }
    }

    .recom_btn {
        border-top: 1rpx solid #F6F6F6
    }

    .recom_btn button {
        line-height: 88rpx;
        height: 88rpx;
        color: #999999;
        font-size: 24rpx;
    }

    .recom_btn .invite {
        color: var(--primary);
        position: relative
    }

    .recom_btn .invite::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1rpx;
        height: 22rpx;
        background-color: #F3F3F3;
        display: block
    }
</style>